<template>
  <div>
    <div class="header">
      <img :src="avatar?avatar:DefaultAvatar" class="avatar">
      <div class="info-box">
        <span class="info-name">{{ name }}</span>
        <span class="info-role"><span v-for="item in roles" :key="item.id">{{ item.name }} &nbsp;&nbsp;</span></span>
      </div>
    </div>

    <div class="dashboard-editor-container">

      <panel-group ref="panelgroup" />
    <!--
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <status-pie-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <used-pie-chart />
        </div>
      </el-col>
    </el-row>
    <el-row>
      <div class="chart-wrapper">
        <class-bar-chart />
      </div>
    </el-row>
    -->
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import DefaultAvatar from '@/assets/avatar.png'
import PanelGroup from './components/PanelGroup'
// import StatusPieChart from './components/StatusPieChart'
// import ClassBarChart from './components/ClassBarChart'
// import UsedPieChart from './components/UsedPieChart'
export default {
  name: 'DashboardBusiness',
  components: {
    PanelGroup
    // StatusPieChart,
    // UsedPieChart,
    // ClassBarChart
  },
  data() {
    return {
      DefaultAvatar: DefaultAvatar,
      tableData: []
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'avatar',
      'roles'
    ])
  },
  created() {
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.header{
    clear: both;
    display: flex;
    background:linear-gradient(to right, #d6ebee , #ffffff);
;
    padding: 8px 20px;
    .avatar {
      width: 40px;
      height: 40px;
      display: block;
      border-radius: 50%;
      margin-right: 20px;
    }
    .info-box {
      .info-name{
        font-size: 18px;
        line-height: 36px;
        font-weight: 500;
        color: #2a5caa;
        margin-right:15px;
      }
       .info-role{
         font-size: 14px;
         line-height: 28px;
         color:	#007947;
         margin-right:15px;
       }
    }
  }
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
